<#include "/common/taglibs.ftl" />
<title>111</title>
<div class="m-alert m-alert--icon m-alert--air m-alert--square alert alert-dismissible m--margin-bottom-30" role="alert">
    <div class="m-alert__icon">
        <i class="flaticon-exclamation m--font-brand"></i>
    </div>
    <div class="m-alert__text">
        With server-side processing enabled, all paging, searching, ordering actions that DataTables performs are handed off to a server where an SQL engine (or similar) can perform these actions on the large data set. See official documentation
        <a href="https://datatables.net/examples/data_sources/server_side.html"
           target="_blank">here</a>.
    </div>
</div>
<div class="m-portlet m-portlet--mobile">
    <div class="m-portlet__head">
        <div class="m-portlet__head-caption">
            <div class="m-portlet__head-title">
                <h3 class="m-portlet__head-text">
                    Ajax Sourced Server-side Processing
                </h3>
            </div>
        </div>
        <div class="m-portlet__head-tools">
            <ul class="m-portlet__nav">
                <li class="m-portlet__nav-item">
                    <a href="#" class="btn btn-primary m-btn m-btn--pill m-btn--custom m-btn--icon m-btn--air">
                                            <span>
                                                <i class="la la-cart-plus"></i>
                                                <span>New Record</span>
                                            </span>
                    </a>
                </li>
                <li class="m-portlet__nav-item"></li>
                <li class="m-portlet__nav-item">
                    <div class="m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push" m-dropdown-toggle="hover" aria-expanded="true">
                        <a href="#" class="m-portlet__nav-link btn btn-lg btn-secondary  m-btn m-btn--icon m-btn--icon-only m-btn--pill  m-dropdown__toggle">
                            <i class="la la-ellipsis-h m--font-brand"></i>
                        </a>
                        <div class="m-dropdown__wrapper">
                            <span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"></span>
                            <div class="m-dropdown__inner">
                                <div class="m-dropdown__body">
                                    <div class="m-dropdown__content">
                                        <ul class="m-nav">
                                            <li class="m-nav__section m-nav__section--first">
                                                <span class="m-nav__section-text">Quick Actions</span>
                                            </li>
                                            <li class="m-nav__item">
                                                <a href="" class="m-nav__link">
                                                    <i class="m-nav__link-icon flaticon-share"></i>
                                                    <span class="m-nav__link-text">Create Post</span>
                                                </a>
                                            </li>
                                            <li class="m-nav__item">
                                                <a href="" class="m-nav__link">
                                                    <i class="m-nav__link-icon flaticon-chat-1"></i>
                                                    <span class="m-nav__link-text">Send Messages</span>
                                                </a>
                                            </li>
                                            <li class="m-nav__item">
                                                <a href="" class="m-nav__link">
                                                    <i class="m-nav__link-icon flaticon-multimedia-2"></i>
                                                    <span class="m-nav__link-text">Upload File</span>
                                                </a>
                                            </li>
                                            <li class="m-nav__section">
                                                <span class="m-nav__section-text">Useful Links</span>
                                            </li>
                                            <li class="m-nav__item">
                                                <a href="" class="m-nav__link">
                                                    <i class="m-nav__link-icon flaticon-info"></i>
                                                    <span class="m-nav__link-text">FAQ</span>
                                                </a>
                                            </li>
                                            <li class="m-nav__item">
                                                <a href="" class="m-nav__link">
                                                    <i class="m-nav__link-icon flaticon-lifebuoy"></i>
                                                    <span class="m-nav__link-text">Support</span>
                                                </a>
                                            </li>
                                            <li class="m-nav__separator m-nav__separator--fit m--hide">
                                            </li>
                                            <li class="m-nav__item m--hide">
                                                <a href="#" class="btn btn-outline-danger m-btn m-btn--pill m-btn--wide btn-sm">Submit</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="m-portlet__body">

        <!--begin: Datatable -->
        <table class="table table-striped- table-bordered table-hover table-checkable" id="m_table_1"
               data-datatable="true"
               data-datatable-advance-search="show"
               data-datatable-quick-search-filter="search_LIKE_name_OR_loginName_OR_email"
        >
            <thead>
            <tr>
                <th data-checkable="true" data-orderable="false">RecordID</th>
                <th data-data="id" data-searchable="false">OrderID</th>
                <th>Country</th>
                <th>ShipCity</th>
                <th>ShipAddress</th>
                <th>CompanyAgent</th>
                <th>CompanyName</th>
                <th>ShipDate</th>
                <th>Status</th>
                <th>Type</th>
                <th>Actions</th>
            </tr>
            </thead>
        </table>
    </div>
</div>

<page-plugin-style>
    <link href="${theme}/assets/vendors/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />
</page-plugin-style>
<page-style>
</page-style>

<page-plugin-script>
    <!--begin::Page Vendors -->
    <script src="${theme}/assets/vendors/custom/datatables/datatables.bundle.js" type="text/javascript"></script>
    <!--end::Page Vendors -->
</page-plugin-script>
<page-script>
    <!--begin::Page Resources -->
<#--<script src="${theme}/assets/demo/default/custom/crud/datatables/data-sources/ajax-server-side.js" type="text/javascript"></script>-->
    <!--end::Page Resources -->
    <script>

        swal("aaa");

        swal({
            type: 'error',
            title: 'Oops...',
            text: 'Something went wrong!',
            footer: '<a href>Why do I have this issue?</a>'
        });
        var DatatablesDataSourceAjaxServer = function() {

            var initTable1 = function() {
                var table = $('#m_table_1');

                // begin first table
                table.DataTable({
                    responsive: true,
                    searchDelay: 500,
                    processing: true,
                    serverSide: true,
                    ajax: 'https://keenthemes.com/metronic/preview/inc/api/datatables/demos/server.php',
                    columns: [
                        {data: 'RecordID'},
                        {data: 'OrderID'},
                        {data: 'Country'},
                        {data: 'ShipCity'},
                        {data: 'ShipAddress'},
                        {data: 'CompanyAgent'},
                        {data: 'CompanyName'},
                        {data: 'ShipDate'},
                        {data: 'Status'},
                        {data: 'Type'},
                        {data: 'Actions'},
                    ],
                    columnDefs: [
                        {
                            targets: -1,
                            title: 'Actions',
                            orderable: false,
                            render: function(data, type, full, meta) {
                                return '<span class="dropdown">\n    <a href="#" class="btn m-btn m-btn--hover-brand m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="dropdown" aria-expanded="true">\n      <i class="la la-ellipsis-h"></i>\n    </a>\n    <div class="dropdown-menu dropdown-menu-right">\n        <a class="dropdown-item" href="#"><i class="la la-edit"></i> Edit Details</a>\n        <a class="dropdown-item" href="#"><i class="la la-leaf"></i> Update Status</a>\n        <a class="dropdown-item" href="#"><i class="la la-print"></i> Generate Report</a>\n    </div>\n</span>\n<a href="#" class="m-portlet__nav-link btn m-btn m-btn--hover-brand m-btn--icon m-btn--icon-only m-btn--pill" title="View">\n    <i class="la la-edit"></i>\n</a>';
                            },
                        },
                        {
                            targets: 8,
                            render: function(data, type, full, meta) {
                                var status = {
                                    1: {'title': 'Pending', 'class': 'm-badge--brand'},
                                    2: {'title': 'Delivered', 'class': ' m-badge--metal'},
                                    3: {'title': 'Canceled', 'class': ' m-badge--primary'},
                                    4: {'title': 'Success', 'class': ' m-badge--success'},
                                    5: {'title': 'Info', 'class': ' m-badge--info'},
                                    6: {'title': 'Danger', 'class': ' m-badge--danger'},
                                    7: {'title': 'Warning', 'class': ' m-badge--warning'},
                                };
                                if (typeof status[data] === 'undefined') {
                                    return data;
                                }
                                return '<span class="m-badge ' + status[data].class + ' m-badge--wide">' + status[data].title + '</span>';
                            },
                        },
                        {
                            targets: 9,
                            render: function(data, type, full, meta) {
                                var status = {
                                    1: {'title': 'Online', 'state': 'danger'},
                                    2: {'title': 'Retail', 'state': 'primary'},
                                    3: {'title': 'Direct', 'state': 'accent'},
                                };
                                if (typeof status[data] === 'undefined') {
                                    return data;
                                }
                                return '<span class="m-badge m-badge--' + status[data].state + ' m-badge--dot"></span>&nbsp;' +
                                        '<span class="m--font-bold m--font-' + status[data].state + '">' + status[data].title + '</span>';
                            },
                        },
                    ],
                });
            };

            return {

                //main function to initiate the module
                init: function() {
                    initTable1();
                },

            };

        }();

        jQuery(document).ready(function() {
            DatatablesDataSourceAjaxServer.init();
        });
    </script>
</page-script>


